<template>
	<view class="main_bg">
		<app-header title="报修详情"></app-header>
		<view class="card" v-if="info.id">
			<view class="cell">
				<view class="label">状态：</view>
				<view class="label">{{info.member_status_name}}</view>
			</view>
			<view class="line"></view>
			<app-deviceCard :item="info" v-if='info.device_id>0' :toUrl="false" :showOp="false"></app-deviceCard>
			<view class="" v-else>
				<view class="cell">
					<view class="label">设备名称：</view>
					<view class="value">{{info.device_name_f || info.device_name}}</view>
				</view>
				<view class="cell">
					<view class="label">设备规格：</view>
					<view class="value">{{info.device_spec}}</view>
				</view>
				<view class="cell">
					<view class="label">故障描述：</view>
				</view>
				<view class="textarea">
					{{info.describe}}
				</view>
				<view class="upload">
					<view class="imgs_list flex-c" v-if="info.store_imgs_f&&info.store_imgs_f.length>0">
						<view class="imgs_son" v-for="(vo,idx) in info.store_imgs_f" :key="idx">
							<u-image :src="vo" v-if="/\w.(png|jpg|jpeg|svg|webp|gif|bmp)$/i.test(vo)" mode="aspectFill"
								width="100px" height="100px"
								@click="$func.previewImage(vo,info.store_imgs_f)"></u-image>
							<video v-else :src="vo" controls style="width:100px;height:100px;"></video>
						</view>
					</view>
				</view>
			</view>

			<view class="line"></view>


			<view class="cell">
				<view class="label">报修时间：</view>
				<view class="value"> {{info.created_at}}</view>
			</view>
			<view class="cell">
				<view class="label">报修人员：</view>
				<view class="value"> {{info.user_name_f}}</view>
			</view>


			<!-- 已派单 已处理 已完成 -->
			<template v-if="info.member_status==1 || info.member_status==2 || info.member_status==3">
				<view class="cell">
					<view class="label">报修记录编号：</view>
					<view class="value"> {{info.device_sns}}</view>
				</view>
				<view class="cell">
					<view class="label">维修人员：</view>
					<view class="value"> {{info.name_f}}</view>
				</view>
			</template>

			<!-- 已处理 已完成 -->
			<template v-if="info.member_status==2 || info.member_status==3">
				<view class="cell">
					<view class="label">维修详情：</view>
				</view>
				<view class="textarea">
					{{info.member_describe}}
				</view>
				<view class="line"></view>
				<view class="cell">
					<view class="label">维修图片</view>
				</view>
				<view class="upload">
					<view class="imgs_list flex-c" v-if="info.member_store_imgs_f&&info.member_store_imgs_f.length>0">
						<view class="imgs_son" v-for="(vo,idx) in info.member_store_imgs_f" :key="idx">
							<u-image :src="vo" v-if="/\w.(png|jpg|jpeg|svg|webp|gif|bmp)$/i.test(vo)"
								mode="aspectFill" width="100px" height="100px"
								@click="$func.previewImage(vo,info.member_store_imgs_f)"></u-image>
							<video play-btn-position='center' v-else :src="vo" controls style="width:100px;height:100px;"></video>
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="cell">
					<view class="label">维修时间</view>
					<view class="value">{{info.dotime}}</view>
				</view>
			</template>
			<!-- 已完成 -->
			<template v-if="info.member_status==3">
				<view class="cell">
					<view class="label">确认时间</view>
					<view class="value">{{info.donetime}}</view>
				</view>
			</template>
			<template v-if="info.evaluate_time">
				<view class="line"></view>
				<view class="cell">
					<view class="label">星级评价</view>
					<view class="value"><u-rate count="5" v-model="info.evaluate_xing" readonly inactiveColor="#AAAAAA"
							activeColor="#F68C4F"></u-rate></view>
				</view>
				<view class="cell">
					<view class="label">文字评价：</view>
				</view>
				<view class="textarea">
					{{info.evaluate_msg}}
				</view>
				<view class="cell">
					<view class="label">评价时间</view>
					<view class="value">{{info.evaluate_time}}</view>
				</view>
				<view class="line"></view>
			</template>
			<view class="flex-c" style="justify-content: flex-end;">
				<view class="btn flex-c" @click="setStatus()" v-if="info.member_status==2">确认结束</view>
				<view class="btn flex-c" @click="$func.toUrl('/pages_user/repair/evaluate?id='+this.id)"
					v-if="info.member_status==3 && !info.evaluate_time">评价</view>
			</view>








		</view>

	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync();
	const safeArea = systemInfo.safeArea;
	export default {
		name: "deviceCard",

		data() {
			return {
				id: 0,
				info: {}
			};
		},
		computed: {
			scrollHeight() {
				return 'calc(100vh  - 102rpx)'
			},
			imgCount() {
				return (imgs) => {
					const list = imgs ? imgs.split('|') : []
					return list.length
				}
			},
			imageList() {
				return (imgs) => {
					console.log(imgs)
					const list = imgs ? imgs.split('|') : []
					return list
				}
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		onShow() {
			this.getInfo()
		},
		methods: {
			setStatus(row) {
				uni.showModal({
					title: '提示',
					content: '确定结束吗？',
					confirmText: "确定",
					cancelText: "取消",
					success: (res) => {
						if (res.confirm) {
							this.$http.post('/data/api.auth.User/maintenanceConfirm', {
								id: this.info.id,
							}).then(res => {
								this.getInfo()
							})
						} else if (res.cancel) {

						}
					}
				});

			},

			getInfo() {
				this.$http.post('/data/api.auth.User/maintenanceView', {
					id: this.id,
				}).then(res => {
					this.info = res.data
				}).catch(() => {

				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.card {
		border-radius: 20px;
		background-color: #FFFFFF;
		margin: 20rpx;
		padding: 20rpx 30rpx;
	}

	.textarea {
		background-color: #F5F5F5;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.line {
		background-color: #E9E9E9;
		height: 1px;
		margin: 15rpx 0;
	}

	.icon {
		transition-duration: 0.3s;
		width: 40rpx;
		height: 40rpx;

		&.open {
			transform: rotate(180deg);
		}
	}

	.imgs_list {
		padding: 5px 0;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 10rpx;

		.imgs_son {
			// margin: 0 8px 0 0;
			border-radius: 4px;
			overflow: hidden;
		}
	}

	.cell {
		min-height: 60rpx;

		.label {
			color: #333333;
		}

		.value {
			color: #ADADAD;
		}
	}

	.btn {
		width: 158rpx;
		height: 80rpx;
		background-color: #4F6FF6;

		border-radius: 10rpx;
		font-size: 30rpx;

		color: #FFFFFF;
		margin-left: 10rpx;
	}
</style>